<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <table border="1" width="700" align="center">
        <tr>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
        </tr>
        <tr>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
        </tr>
        <tr>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
            <td>DATA</td>
        </tr>
    </table>
</body>
<script>
    // 表格的即时编辑

    var atd = document.querySelectorAll("td");

    for(var i=0;i<atd.length;i++){
        atd[i].onclick = function(){
            // console.log(this)
            // 创建输入框
            var ipt = document.createElement("input");
            // 设置输入框的内容为原td的内容
            ipt.value = this.innerHTML;
            // 清空原td的内容
            this.innerHTML = "";
            // 将输入框插入到td中
            this.appendChild(ipt);
            // 主动给当前输入框获取焦点（新）
            ipt.focus();
            // this === td
            // 保存这个td
            var that = this;
            // 输入框失去焦点时
            ipt.onblur = function(){
                // this === ipt
                // 将输入框的内容，设置回td
                that.innerHTML = this.value;
            }
        }
    }

</script>
</html>